<template>
	<view class="box">
		<!-- 搜索栏 -->
		<view class="search_box">
			<uni-search-bar @input="input" :radius="100" cancelButton="none" placeholder="请输入搜索内容..." />
		</view>
		<!-- 渲染后端返回的匹配结果 -->
		<view class="search_item_box" v-if="searchResult.length !== 0">
			<view 
					class="search_item"
					v-for="item in searchResult"
					:key="item.goods_id"
					@click="gotoSearchItem(item.goods_id)">
				<view class="goods_name">{{ item.goods_name }}</view> 
				<uni-icons type="arrowright" size="16" />
			</view>
		</view>
		<!-- 搜索历史结果 -->
		<view class="history_list_box" v-else>
			<view class="title">
				<view class="text">
					搜索历史
				</view>
				<uni-icons type="trash" size="22" @click="clearHistory" />
			</view>
			<!-- 历史数据 -->
			<view class="history_item">
				<uni-tag 
					:text="item" 
					v-for="(item, index) in historyList" 
					:key="index" 
					@click="gotoGoodsList(index)"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				inputWord: '',
				searchResult: [],
				historyList: []
			};
		},
		methods: {
			input(e) {
				clearTimeout(this.timer)
				// console.log(e)
				this.timer = setTimeout(() => {
					this.inputWord = e
					// 获取匹配数据
					this.getSearchList();
					
					if (this.inputWord) this.saveHistroy();
				}, 500)
			},
			
			// 获取搜索结果
			async getSearchList() {
				if (!this.inputWord) {
					this.searchResult = []
					return
				} else {
					let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/goods/qsearch', {
						query: this.inputWord
					})
					res.meta.status !== 200 ? uni.$showMsg() : this.searchResult = res.message
					console.log(this.searchResult)
				}
			},
			
			// 保存搜索关键字
			saveHistroy() {
				for (let i of this.historyList) {
					if (this.historyList[i] === this.inputWord) {
						this.historyList.splice(i, 1)
					}
				}
				
				
				this.historyList.unshift(this.inputWord);
				
				// 将数据存储到本地
				uni.setStorageSync('historySearch', JSON.stringify(this.historyList))
			},
			
			// 点击列表搜索结果项
			gotoSearchItem(id) {
				console.log(id)
				uni.navigateTo({
					url: '/subpackage/goods_detail/goods_detail?goods_id=' + id
				})
			},
			
			// 清空历史数据
			clearHistory() {
				console.log('1111')
				this.historyList = []
				uni.setStorageSync('historySearch', [])
			},
			
			// 点击历史搜索跳转页面
			gotoGoodsList(index) {
				console.log(index)
				uni.navigateTo({
					url: '/subpackage/goods_list/goods_list?query=' + this.historyList[index]
				})
			}
		},
		onLoad() {
			// 加载本地历史数据
			this.historyList = JSON.parse(uni.getStorageSync('historySearch' || []))
		}
	}
</script>

<style lang="scss">
	.box {
		.search_box {
			position: sticky;
			top: 0;
			z-index: 99999;
			padding: 10rpx 5rpx;
			background-color: #409eff;
		}
		.search_item_box {
			.search_item {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				border-bottom: 1px solid #ccc;
				.goods_name {
					color: #434343;
					font-size: 14px;
					padding: 15rpx 10rpx;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.history_list_box {
			.title {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #ccc;
				padding: 15rpx;
			}
			.history_item {
				padding: 15rpx;
				.uni-tag {
					background-color: #ccc;
					border: none;
					margin-right: 10px;
				}
			}
		}
	}
</style>
